<div class="col s12 m6 offset-m3" *ngIf="isLoggedIn">
  You are already logged In! <br />
  please see the challenges
  <a [routerLink]="allChallengesRoutePathCommon" class="light-link" routerLinkActive="active-auth">here!</a>
</div>
<div class="col s12 m6 offset-m3 left" *ngIf="!isLoggedIn">
  <ul class="left">
    <li class="ev-horiz-list">
      <a [routerLink]="loginRoute" class="dark-link" routerLinkActive="active-auth" (click)="authService.resetForm()"
        >Log In</a
      >
    </li>
    <li class="ev-horiz-list">
      <a [routerLink]="signupRoute" class="light-link" routerLinkActive="active-auth" (click)="authService.resetForm()"
        >Sign Up</a
      >
    </li>
  </ul>
</div>
<div class="col s12 m6 offset-m3" *ngIf="!isLoggedIn">
  <!-- login form -->
  <form name="loginForm" #loginForm="ngForm" (ngSubmit)="userLogin(loginForm.valid)" id="log-in" novalidate>
    <!-- username -->
    <div class="input-field align-left">
      <input
        type="text"
        id="name"
        class="dark-autofill"
        name="name"
        (focusin)="isNameFocused = true"
        (focusout)="isNameFocused = authService.getUser['name'] !== ''"
        [(ngModel)]="authService.getUser['name']"
        (change)="isNameFocused = authService.getUser['name'] !== ''"
        #name="ngModel"
        minLength="3"
        required
      />
      <span class="form-icon form-icon-dark"><i class="fa fa-user"></i></span>
      <label for="name" [class.active]="isNameFocused">Username*</label>
      <div class="wrn-msg text-highlight" *ngIf="name.invalid && (name.dirty || name.touched || loginForm.submitted)">
        <p *ngIf="name.errors.minlength">Username is too short.</p>
        <p *ngIf="name.errors.required">Username is required.</p>
      </div>
    </div>
    <!-- password -->
    <div class="input-field align-left">
      <input
        type="{{ authService.canShowPassword ? 'text' : 'password' }}"
        id="password"
        (paste)="authService.getUser['password'] = ''"
        class="dark-autofill"
        name="password"
        (focusin)="isPasswordFocused = true"
        (focusout)="isPasswordFocused = authService.getUser['password'] !== ''"
        (change)="isPasswordFocused = authService.getUser['password'] !== ''"
        [(ngModel)]="authService.getUser['password']"
        #password="ngModel"
        autocomplete="new-password"
        minlength="8"
        required
      />
      <span class="form-icon form-icon-dark" (click)="authService.togglePasswordVisibility()">
        <i *ngIf="!authService.canShowPassword" class="fa fa-eye pointer"></i>
        <i *ngIf="authService.canShowPassword" class="fa fa-eye-slash pointer"></i>
      </span>
      <label for="password" [class.active]="isPasswordFocused">Password (min 8 characters) *</label>
      <div
        class="wrn-msg text-highlight"
        *ngIf="password.invalid && (password.dirty || password.touched || loginForm.submitted)"
      >
        <p *ngIf="password.errors.minlength">Password is less than 8 characters.</p>
        <p *ngIf="password.errors.required">Password is required.</p>
      </div>
    </div>
    <div class="row">
      <br />
      <div class="col s6 align-left rm-gut">
        <button class="waves-effect waves-dark btn ev-btn-dark grad-btn grad-btn-dark w-300" type="submit">
          Log In
        </button>
      </div>
      <div class="col s6 align-right right rm-gut">
        <a routerLink="/auth/reset-password" class="light-link fg-pass">Forgot Password or Username?</a>
      </div>
    </div>
    <div *ngIf="authService.isFormError" class="wrn-msg text-highlight align-left">{{ authService.FormError }}</div>
    <div>
      <p class="text-light-gray">
        <span class="text-med-black">Start with a new account </span
        ><a class="highlight-link" [routerLink]="signupRoute"> Sign Up</a>
      </p>
    </div>
  </form>
</div>
